<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div th:replace="/common/header"></div>
<div id="Content">
<div id="BackLink">
    <a th:href="${'/category/ViewCategory?categoryId='}+${product.category}">
        Return to <th:block th:text="${product.category}"/>
    </a></div>

<div id="Catalog">

    <style type="text/css">

        table {
            width: 700px;
            padding: 0;
            margin: 0;
        }

        caption {
            padding: 0 0 5px 0;
            width: 700px;
            font: italic 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            text-align: right;
        }

        th {
            font: 20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            color: #f5ba11;
            border-right: 1px solid #bfa986;
            border-bottom: 1px solid #bfa986;
            border-top: 1px solid #bfa986;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-align: left;
            padding: 6px 6px 6px 12px;
            background: #eee0c5 no-repeat;
        }

        td {
            border-right: 1px solid #bfa986;
            border-bottom: 1px solid #bfa986;
            background: #fff;
            font-size:16px;
            padding: 6px 6px 6px 12px;
            color: #4f6b72;
        }
    </style>

    <h2><th:block th:text="${product.name}" /></h2>

    <table>
        <tr>
            <th>Item ID</th>
            <th>Product ID</th>
            <th>Description</th>
            <th>List Price</th>
            <th>&nbsp;</th>
        </tr>
            <tr th:each="item : ${itemlist}">
                <td><a th:href="${'/category/ViewItem?itemId='}+${item.itemId}"><th:block th:text="${item.itemId}" /></a> </td>
                <td th:text="${item.productId}"></td>
                <td th:text="|${item.attribute1},${product.name}|"></td>
                <td th:text="${item.listPrice}"></td>
                <td><a th:if="${item.instock} eq 'true' " th:href="${'/cart/AddItemtoCart?workingItemId='}+${item.itemId}" class="Button">
                    Add to Cart
                </a></td>
              <td th:if="${item.instock} eq 'false' " style="background-color:rgba(0,0,0,0);border: none"><h2 style="border-radius: 0; font-size: 18px;
               border-right: 2px solid #eee0c5;
               border-bottom: 2px solid #eee0c5;">提示:</h2><a href="#" >  亲~ 商品已经下架了,商家正努力补货中</a></td>
            </tr>
        <tr>
            <td>
            </td>
        </tr>
    </table>

</div>
</div>
<div th:replace="/common/footer"></div>
</body>
</html>